<!-- eslint-disable vue/no-deprecated-v-bind-sync -->
<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<template>
 <div>
    <HeaderComponent style="box-shadow: 0 1px 10px 0 #dfdfdf; height:64px; padding:0 28px;">
      <template slot="left">
        <div class="left" @click="drawer = true">
          <i class="el-icon-menu"></i>
        </div>

        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/main' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/main/classDetail' }">课程内容</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer :visible.sync="drawer" :direction="'ltr'" size="240px">
          <template slot="title">
            <div style="width: 96px">
              <img src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" height="24px">
            </div>
          </template>
          <el-menu class="menu">
            <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </template>

      <template slot="right">
        <RightHeader style="position: absolute; right: 20px; top: 15px;" />
      </template>
    </HeaderComponent>
    <div style="margin-top: 20px;">
      <div class="cmps-homework-review">
        <el-tabs v-model="activeNav">
    <el-tab-pane label="详情" name="first" class="view-homework-detail">
      <Work :workId="workId"></Work>  <!-- 注意这里的 prop 名称 -->
    </el-tab-pane>
    <el-tab-pane label="批阅" name="second">
    <!-- workId 存在或为 0 时都显示 -->
    <ReadWork :workId="workId"></ReadWork>
  </el-tab-pane>
  </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import ReadWork from './ReadWork.vue';
import { computed, ref } from 'vue'  // 添加 ref
import { useRoute } from 'vue-router'
import Work from './WorkComment.vue'
import HeaderComponent from '../components/HeaderComponent.vue';

const route = useRoute()
const workId = computed(() => route.params.id)
const activeNav = ref('first')  // 添加这个
const drawer = ref(false)       // 添加这个

// 添加调试代码
console.log('路由参数：', route.params)
console.log('workId:', workId.value) 
</script>

<style scoped>

</style>
